import React, { useContext, useState } from 'react';
import {
  Button,
  Form,
  Grid,
  Input,
  Message,
  Modal,
  Space,
  Tooltip,
} from '@arco-design/web-react';
import useLocale from '@/utils/useLocale';
import locale from './locale';
import styles from './style//index.module.less';
import { Create } from '@/api/modules/deviceManager';
import ModalTitle from '@/components/ModalTitle';
import { GlobalContext } from '@/context';
import { IconQuestionCircle } from '@arco-design/web-react/icon';

const { Row, Col } = Grid;
const { useForm } = Form;
function TableEdit({
  visible,
  onVisible,
}: {
  visible: boolean;
  onVisible: (status: boolean, refresh?: boolean) => void;
}) {
  const t = useLocale(locale);
  const [form] = useForm();
  const [loading, setLoading] = useState(false);

  const onCreate = () => {
    form.validate((errors, values) => {
      if (!errors) {
        setLoading(true);
        Create(values)
          .then(() => {
            onVisible(false, true);
            form.resetFields();
            setLoading(false);
            Message.success(t['create.success']);
          })
          .catch(() => {
            setLoading(false);
          });
      }
    });
  };

  const onCancel = () => {
    form.resetFields();
    onVisible(false);
  };

  const { rtl } = useContext(GlobalContext);

  return (
    <div>
      <Modal
        title={<ModalTitle title={t['create.title']} />}
        style={{ width: '789px' }}
        visible={visible}
        onCancel={() => onCancel()}
        maskClosable={false}
        unmountOnExit={true}
        footer={null}
        className={rtl ? 'rtl' : ''}
      >
        <div>
          <Form
            form={form}
            labelAlign="left"
            labelCol={{ span: 9 }}
            wrapperCol={{ span: 15 }}
            // initialValues={formParams}
            validateMessages={{
              required: () => t['empty'],
            }}
            validateTrigger="onBlur"
            layout="vertical"
            autoComplete="off"
          >
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  label={
                    <span
                      style={{ display: 'inline-flex', alignItems: 'center' }}
                    >
                      {t['create.uuid']}
                      <Tooltip
                        position={rtl ? 'left' : 'right'}
                        trigger="hover"
                        content={t['create.uuid.tip']}
                      >
                        <IconQuestionCircle
                          style={{
                            marginLeft: 4,
                            marginRight: 4,
                            cursor: 'pointer',
                            fontSize: 16,
                          }}
                        />
                      </Tooltip>
                    </span>
                  }
                  field="uuid"
                  rules={[{ required: true }]}
                >
                  <Input
                    allowClear
                    maxLength={100}
                    placeholder={t['create.uuid.placeholder']}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={t['create.remark']} field="remark">
                  <Input
                    allowClear
                    maxLength={100}
                    placeholder={t['create.remark.placeholder']}
                  />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Space size={24} className={styles['create-button-group']}>
                  <Button
                    type="outline"
                    size="large"
                    onClick={() => onCancel()}
                  >
                    {t['cancel']}
                  </Button>
                  <Button
                    type="primary"
                    size="large"
                    onClick={onCreate}
                    loading={loading}
                    loadingFixedWidth
                  >
                    {t['add']}
                  </Button>
                </Space>
              </Col>
            </Row>
          </Form>
        </div>
      </Modal>
    </div>
  );
}

export default TableEdit;
